<template>
	<gui-page :customHeader="true" style="background: #f3f3f3;">
		<template v-slot:gHeader>
			<!-- #ifdef MP -->
			<view style="height:20px;"></view>
			<!-- #endif -->
		</template>
		<!-- 请开始您的开发 ~ -->
		<template v-slot:gBody>
			<view class="gui-padding gui-bg-white ps tophead">
				<logo title="收益管理" showback @back="handleBack" btntext="&#xe6fe;"></logo>
			</view>
			<!-- #ifdef APP -->
			<view style="margin-top:90px;"></view>
			<!-- #endif -->
			<view class="tipbox"><text class="gui-icons mr5">&#xe666;</text>推广订单过了冻结周期后，对应的收益转为可提现</view>
			<view class="cc-box-main">
				<view class="cc-l cc-c">
					<view class="tit">可提现</view>
					<view class="price"><text>￥</text>0.00</view>
				</view>
				<view class="c-sp"></view>
				<view class="cc-r cc-c">
					<view class="tit">佣金金额</view>
					<view class="price"><text>￥</text>0.00</view>
				</view>
			</view>
			<view class="gui-padding-m">
				<view class="gui-bg-white detail-items ">
					<view class="fb fz16">提现提醒</view>
					<view class="flex justify-content-between align-items mt10">
						<view><text class="fz18 fb pr ftp4">.</text><text class="ml5 fz14">当前可提现金额是：<text class="red fb">￥3124545元</text></text></view>
						<view class="ml20">
							<button
													type="default" 
													class="gui-button-mini mainbg" >
														<text class="gui-color-white gui-button-text-mini gui-icons">&#xe639; 点击提现</text>
													</button>
						</view>
					</view>
					<view class="flex justify-content-between align-items mt5">
						<view class="flex1"><text class="fz18 fb pr ftp4">.</text><text class="ml5 fz14">如果遇到问题联系客服：545454545</text></view>
					</view>
				</view>
				<view class="gui-bg-white detail-items mt10">
					<view class="gui-bg-gray gui-padding-small"><gui-switch-navigation :items="navItems" textAlign="center" :isCenter="true"
						activeDirection="center" :size="0" :margin="40"
						:activeLineClass="['gui-gtbg-green']"
						@change="navchange"></gui-switch-navigation></view>
					<cc-income-yongjin v-if="currentIndex==0"></cc-income-yongjin>
					<cc-income-tixian v-if="currentIndex==1"></cc-income-tixian>
				</view>
			</view>
		</template>
	</gui-page>
</template>
<script>
	export default {
		data() {
			return {
				currentIndex:0,
				isLoad: false,
				navItems: [ {
					id: 2,
					name: '佣金明细'
				}, {
					id: 3,
					name: '提现记录'
				}],
			}
		},
		onLoad() {
			setTimeout(() => {
				this.isLoad = true
			}, 1000)
		},
		methods: {
			handleBack() {
				uni.switchTab({
					url: "/pages/tabbar/me"
				})
			},
			navchange(e){
				this.currentIndex = e
			}
		}
	}
</script>
<style scoped lang="scss">
	.tipbox{
		background-image: linear-gradient(45deg, #0e8a53 0%, #257a54 40%, #1d9560 100%);
		height: 36px;
		line-height: 36px;
		padding-left: 1rem;
		color: #fff;
		width: 100%;
		font-size:24rpx;
	}
	.cc-box-main{
		background:#11aa66;
		display: flex;
		padding:20px;
		.c-sp{
			height: 160rpx;
			width: 1px;
			background: #53b377;
		}
		.cc-c{
			width: 50%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color:#fff;
			.tit{font-size:26rpx;}
			.price{
				font-size:56rpx;margin-top: 10rpx;
				text{font-size:24rpx;}
			}
		}
	}
	.detail-items{padding:15px;border-radius:10px;}
</style>